<template>
  <view class='fab_box' 
    :style='{bottom:touch_data.scroll_top+"px",right:touch_data.scroll_left+"px"}'
    @tap='open' 
    @touchstart.stop='touchStart'
    @touchmove.stop='touchMove' 
    @touchend.stop='touchEnd'>
    <view class='fab_item' :class='{bg_color:type != "set"}'>
      <view class='icon' v-if='type == "set"'>
        <text class='iconfont icon-24'></text>
      </view>
      <view class='icon img_box' v-if='type == "new"'>
        <image src='../../static/img/icon/new.png' mode='widthFix'></image>
        <view class='num'>{{num}}</view>
      </view>
      <view class='icon img_box' v-if='type == "notice"'>
        <image src='../../static/img/icon/notice.png' mode='widthFix'></image>
        <view class='num'>{{num}}</view>
      </view>
    </view>

  </view>
</template>

<script>

  export default {
    props: {
      type: {
        type: String,
        default: "set"
      },
      head_height: {
        type: Number,
        default: 0
      },
      num: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        touch_data: {
          start_top: 0,
          start_left: 0,
          start_scrollTop: uni.upx2px(320),
          scroll_top: uni.upx2px(320),
          start_scrollLeft: uni.upx2px(20),
          scroll_left: uni.upx2px(20),
        },
        dom_info: {}
      }
    },
    mounted() {
      this.getDomInfo()
    },
    methods: {
      open() {
        let title = "";
        switch(this.type) {
          case "new":
            title = "今日更新列表"
          break;
          case "notice":
            title = "今日预警"
          break;
          default: 
            this.$emit('clickFab');
            return
        }
        uni.navigateTo({
            url: '/pages/index/components/articleList?title='+title
        });
      },
      // 按下
      touchStart(e) {
        this.touch_data.start_top = e.changedTouches[0].pageY;
        this.touch_data.start_left = e.changedTouches[0].pageX;
      },
      // 拖动
			touchMove(e) {
        let window_w = this.dom_info.window_info.windowWidth;
        let window_h = this.dom_info.window_info.windowHeight;
        let dow_w = this.dom_info.dom_info.width;
        let dow_h = this.dom_info.dom_info.height;
        
				this.touch_data.scroll_top = this.touch_data.start_scrollTop - (e.changedTouches[0].pageY - this.touch_data.start_top);
				this.touch_data.scroll_left = this.touch_data.start_scrollLeft - (e.changedTouches[0].pageX - this.touch_data.start_left);
        if(this.touch_data.scroll_left <= 0) {
					this.touch_data.scroll_left = 0;
				}
				if(this.touch_data.scroll_left >= (window_w - dow_w)) {
					this.touch_data.scroll_left = window_w - dow_w;
        }
        
        if(this.touch_data.scroll_top <= 0) {
					this.touch_data.scroll_top = 0;
				}
        if(this.touch_data.scroll_top <= dow_h) {
					this.touch_data.scroll_top = dow_h;
        }
        if(this.touch_data.scroll_top >= (window_h -this.head_height)) {
					this.touch_data.scroll_top = window_h -  this.head_height;
        }
      },
      // 抬起
      touchEnd() {
        this.touch_data.start_scrollTop = this.touch_data.scroll_top;
        this.touch_data.start_scrollLeft = this.touch_data.scroll_left;
      },
      // 计算页面头部高度
      getDomInfo() {
        this.$getDomInfo(".fab_box").then((res) => {
          this.dom_info = res;
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.fab_box {
  width:96upx;
  height:96upx;
  position: fixed;
  right: 20upx;
  bottom: 300upx;
  box-shadow: 0px 3upx 20upx 0px rgba(0, 0, 0, 0.2);
  border-radius:50%;
  z-index: 99;
  .fab_item {
    width:96upx;
    height:96upx;
    background:#fff;
    border-radius:50%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      position: relative;
      .iconfont {
        font-size: 50upx;
        color: #0084FF;
      }
      >image {
        width: 40upx;
      }
    }
    .img_box {
      height: 40upx;
      .num {
        min-width: 24upx;
        height: 24upx;
        background: #fff;
        // padding: 0 5upx;
        // box-sizing: border-box;
        font-size: 20upx;
        color: #D50D0D;
        border-radius: 40upx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -15upx;
        left: 20upx;
      }
    }
    
  }
  .bg_color {
    background:#D50D0D;
  }
}
</style>